<script setup lang="ts">
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/store/user'

interface LoginForm {
  account: string
  code: string
}

const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const formRef = ref()

const form = reactive<LoginForm>({
  account: '',
  code: '',
})

// 表单验证规则
const rules = {
  account: [
    {required: true, message: '账号不能为空', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '密码不能为空', trigger: 'blur'}
  ]
}

const loginApi = async (data: LoginForm): Promise<{ success: boolean; message?: string }> => {
  const loginResult = await userStore.login(data)
  if (loginResult.success) {
    const userInfoResult = await userStore.getUserInfo()
    if (!userInfoResult.success) {
      return {success: false, message: userInfoResult.message}
    }
  }
  return loginResult
}

const onSubmit = async () => {
  if (!formRef.value) return

  try {
    loading.value = true
    await formRef.value.validate()
    const result = await loginApi(form)
    if (result.success) {
      window.$message.success('登录成功，欢迎回来！')
      await router.push('/dashboard')
    } else {
      window.$message.error(result.message || '登录失败')
    }
  } catch (errors) {

  } finally {
    loading.value = false
  }
}

</script>

<template>
  <div style="display:flex;justify-content: center; align-items: center;height: 100vh;">
    <n-card
        class="glass-card"
        style="width: 420px;height: 380px;position: relative;overflow: visible;border: none;"
        :bordered="false"
    >
      <img class="card-header-img" style="width: 180px; height: 45px" alt="logo" src="@/assets/naivelogo.svg"/>
      <template #header>
        <div class="card-header">
          <span class="login-text">登 录</span>
        </div>
      </template>

      <n-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-placement="top"
          size="large"
          @submit.prevent="onSubmit"
          @keydown.enter.prevent="onSubmit"
      >
        <n-form-item path="account" label="账号">
          <n-input
              v-model:value="form.account"
              placeholder="请输入账号"
              :disabled="loading"
              clearable
          />
        </n-form-item>

        <n-form-item path="code" label="密码">
          <n-input
              v-model:value="form.code"
              placeholder="请输入密码"
              type="password"
              show-password-on="click"
              :disabled="loading"
              clearable
          />
        </n-form-item>

        <n-form-item>
          <n-button
              type="primary"
              block
              :loading="loading"
              :disabled="loading"
              @click="onSubmit"
          >
            {{ loading ? '登录中...' : '登 录' }}
          </n-button>
        </n-form-item>
      </n-form>
    </n-card>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card-header-img {
  width: 140px;
  height: 45px;
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
}

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 15px rgba(1, 194, 195, 0.2);
  padding: 10px;
}

.glass-card:hover {
  box-shadow: 0 2px 25px rgba(1, 194, 195, 0.2);
}

.login-text {
  font-size: 30px;
  font-weight: bold;
  color: #000000;
}
</style>
